<template>
  <div style="width:100%; height: 150px">
    <div ref="heatMap" style="width: 95%; height: 100%"></div>
  </div>
</template>

<script setup>
import { onMounted, ref} from 'vue'
import * as echarts from 'echarts'

let heatMap = ref(null)

function getVirtualData(year) {
  const date = +echarts.time.parse(year + '-01-01')
  const end = +echarts.time.parse(year + '-12-31')
  const dayTime = 3600 * 24 * 1000
  const data = []
  for (let time = date; time <= end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 10)
    ])
  }
  return data
}

onMounted(() => {
  const myChart = echarts.init(heatMap.value)
  myChart.setOption({
    tooltip: {
      formatter: function (params) {
        return params.value[0] + ' : ' + params.value[1]
      }
    },
    visualMap: {
      show: false,
      min: 0,
      max: 10,
      inRange: {
        color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127', '#196127']
      }
    },
    calendar: {
      itemStyle: {
        color: '#ccc',
        borderWidth: 3,
        borderColor: '#fff'
      },
      cellSize: ['auto', 13],
      range: ['2025-1-1', '2025-12-31'],
      splitLine: true,
      dayLabel: {
        firstDay: 1,
        nameMap: 'ZH'
      },
      monthLabel: {
        nameMap: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
        ]
      },
      yearLabel: {
        show: true
      },
      silent: {
        show: false
      }
    },
    series: {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: getVirtualData(2025)
    }
  })
})
</script>

<style scoped>

</style>
